<template>
	<view class="wanlpage-one-point-purchase" style="background-color: #ffffff;border-radius: 10px;margin: 12.5px;overflow: hidden">
		<view
			class="wanlpage-one-point-purchase__mian"
			:class="[`col-3-${pageData.params.colmargin}`]"
		>
			<view class="head">
				<view class="title">
					<view
						class="margin-right-sm text-bold"
					>
						<image style="width: 50rpx;height: 50rpx" src="/static/images/onePoint.png"></image>
					</view>
					<view>
						<image style="width: 120rpx;height: 40rpx;"  src="/static/images/onePoint2576.png"></image>
					</view>
				</view>
				<view class="text-gray text-sm" @tap="handleOnePointPurchase">
					<text class="margin-right-xs">更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in shopData" v-if="index<5" :key="item.id" @tap="handleGoods(item.id)">
					<image :src="$wanlshop.oss(item.image, 100, 100)" mode="aspectFill"></image>
					<view class="flex align-center justify-center margin-top-xs">
						<text class="text-price text-lg text-orange">{{item.oneprice}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'WanlPageOnePointPurchase',
	props: {
		pageData: {
			type: Object,
			default: function() {
				return {
					name: '1分购组件',
					type: 'groups',
					params: [],
					style: [],
					data: []
				};
			}
		},
		shopData: {
			type: Array,
			default () {
				return []
			}
		}
	},
	data() {
		return {
			data: []
		};
	},
	created() {
	},
	methods: {
		handleGoods(id) {
			this.$wanlshop.to(`/pages/yifengou/yifengou?id=${id}`);
		},
		handleOnePointPurchase(){
			this.$wanlshop.to(`/pages/yifengou/list`);
		}
	}
};
</script>

<style lang="scss">
.wanlpage-one-point-purchase {
	&__mian {
		background-repeat: no-repeat;
		background-size: 100% auto;
		height: 288rpx;
		&.col-3-10 {
			.head {
				padding: 0 10rpx;
			}
			.list {
				padding: 0 10rpx;
				.item {
					width: calc((100% - 20rpx) / 3);
					margin-bottom: 10rpx;
				}
			}
		}
		&.col-3-15 {
			.head {
				padding: 0 15rpx;
			}
			.list {
				padding: 0 15rpx;
				.item {
					width: calc((100% - 30rpx) / 3);
					margin-bottom: 15rpx;
				}
			}
		}
		&.col-3-20 {
			.head {
				padding: 0 20rpx;
			}
			.list {
				padding: 0 20rpx;
				.item {
					width: calc((100% - 40rpx) / 3);
					margin-bottom: 20rpx;
				}
			}
		}
		&.col-3-25 {
			.head {
				padding: 0 25rpx;
			}
			.list {
				padding: 0 25rpx;
				.item {
					width: calc((100% - 50rpx) / 3);
					margin-bottom: 25rpx;
				}
			}
		}
		&.col-3-30 {
			.head {
				padding: 0 30rpx;
			}
			.list {
				padding: 0 30rpx;
				.item {
					width: calc((100% - 60rpx) / 3);
					margin-bottom: 30rpx;
				}
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
			padding:0 20rpx;
			background:linear-gradient( 180deg, #F3DDD3 0%, #FBEEEB 100%);
			.title {
				display: flex;
				align-items: center;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			align-items: center;
			justify-content: flex-start;
			&::after{
				content: '';
				display: block;
				width: 33%;
				visibility: hidden;
			}
			.item {
				margin-top: 10rpx;
				flex-wrap: wrap;
				flex-direction: column;
				width: 18%;
				display: flex;
				justify-content: center;
				margin-right: 10rpx;
				&:first-child{
					margin-left:20rpx;
				}
				&:last-child{
					margin-right:0rpx;
				}
				image {
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					background-color: #f9f9f9;
				}
				.text-price{
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>
